<template>
  <div class="w-[1100px] h-[1200px] p-20 relative flex flex-col">
    <div class="flex-1">
      <div class="flex justify-center items-center">
        <div class="flex justify-center items-center ml-10" style="border: 2px solid #000">丨丨丨丨条形码丨丨丨丨丨</div>
        <div class="text-center font-semibold text-4xl flex-1">{{ printObj.hisname }}</div>
      </div>

      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex-1 text-lg">姓名： {{ printObj.brName }}</div>
        <div class="flex-1 text-lg">姓别：{{ printObj.brXb }}</div>

        <div class="flex-1 text-lg">年龄：{{ printObj.brAge }} 岁</div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="pr-2 flex items-center">
          联系电话：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.brMob }}</div>
        </div>
        <div class="flex items-end">
          执行科室：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.ksmc }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="pr-2 flex items-center">
          费别：<input type="checkbox" :checked="printObj.yblb == '医保'" class="mr-2" />医保
          <input class="mx-2" type="checkbox" :checked="printObj.yblb == '自费'" />非医保
        </div>
        <div class="flex items-end">
          医保/就诊卡号：
          <div class="w-40" style="border-bottom: 1px solid #000">{{ printObj.brBlkh }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex items-end w-full">
          临床诊断：
          <div class="flex-1" style="border-bottom: 1px solid #000">{{ printObj.lczd }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex items-end w-full">
          中医诊断：
          <div class="flex-1" style="border-bottom: 1px solid #000">{{ printObj.zybcZyzdZdmc }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center px-20 mt-4">
        <div class="flex items-end w-3/4">
          其他诊断：
          <div class="flex-1" style="border-bottom: 1px solid #000">{{ printObj.qtzd }}</div>
        </div>
        <div class="flex items-end w-1/4">
          开具日期：
          <div class="flex-1" style="border-bottom: 1px solid #000">{{ printObj.xdrq }}</div>
        </div>
      </div>
      <div class="text-2xl font-bold px-20 mt-2">Rp</div>
      <div class="px-20 min-h-[800px]">
        <div class="flex justify-between" style="border-bottom: 1px solid #000">
          <div class="w-10">序号</div>
          <div class="w-1/2">治疗项目</div>
          <div class="w-50">单价</div>
          <div class="w-50">数量</div>
          <div class="w-50">单位</div>
          <div class="w-50">治疗部位</div>
        </div>
        <div v-for="(item, index) in printData.printData?.detail" :key="item" class="flex justify-between items-center mt-4">
          <div class="w-10">{{ index + 1 }}</div>
          <div class="w-1/2">{{ item.mc }}</div>
          <div class="w-50">{{ item.dj }}</div>
          <div class="w-50">{{ item.sl }}</div>
          <div class="w-50">{{ item.dw }}</div>
          <div class="w-50">{{ item.zlbw }}</div>
        </div>
      </div>
      <div class="w-full px-20">
        <table class="w-full mt-10">
          <tbody>
            <tr>
              <td class="w-[20%]">治疗日期</td>
              <td class="w-[20%]">治疗时间</td>
              <td class="w-[35%]">治疗项目</td>
              <td class="w-[25%]">医生/护士签名</td>
            </tr>
            <tr v-for="item in 5" :key="item">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
        <table class="w-full mt-10">
          <tbody>
            <tr>
              <td class="w-[20%]">打印日期：</td>
              <td class="w-[30%]">{{ printObj.dysj }}</td>
              <td class="w-[20%]">医生签名：</td>
              <td class="w-[30%]"></td>
            </tr>
            <tr>
              <td class="w-[20%]">总金额（元）：</td>
              <td class="w-[30%]">{{ printObj.zje }}</td>
              <td class="w-[20%]">备注：</td>
              <td class="w-[30%]"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'

const printObj = ref({})

const props = defineProps({
  printData: {
    type: Array,
    default: () => []
  }
})
watch(
  () => props.printData,
  () => {
    if (props.printData.printData?.detail[0]) {
      printObj.value = props.printData.printData?.detail[0]
    } else {
      printObj.value = {}
    }
  }
)
</script>
<style lang="less" scoped>
table tr td {
  height: 35px;
  padding: 10px;
  border: 1px solid #000;
}
</style>
